<script setup lang="ts">
const {waterForm, listB} = defineProps<{
  waterForm: Object;  // 定义采样时间的类型
  listB: Object;  // 定义采样时间的类型
}>();


// 曲线
const handleQxChange = (item) => {
  // 根据选中的样品编号，找到对应的 finalResult
  const selectedOption = listB.qxyList.find(
      option => option.sampleNumber === item.qx_ypbh
  );

  // 如果找到了对应的选项，则将 finalResult 赋值给 px_phz
  if (selectedOption) {
    item.qx_cdjg = selectedOption.finalResult;
  }
}
// 空白
const handleKbyChange = (item) => {
  // 根据选中的样品编号，找到对应的 finalResult
  const selectedOption = listB.kbyList.find(
      option => option.sampleNumber === item.kb_ypbh
  );


}

// 标准
const handleBzyChange = (item) => {
  // 根据选中的样品编号，找到对应的 finalResult
  const selectedOption = listB.bzyList.find(
      option => option.extractedContent === item.bz_ypph
  );

  console.log(selectedOption)

  // 如果找到了对应的选项，则将 finalResult 赋值给 px_phz
  if (selectedOption) {
    item.bz_cdnd = selectedOption.finalResult;
  }
}


// 加标
const handleJzyChange = (item) => {
  // 根据选中的样品编号，找到对应的 finalResult
  const selectedOption = listB.jbyList.find(
      option => option.sampleNumber === item.jb_ypbh
  );

  // 如果找到了对应的选项，则将 finalResult 赋值给 px_phz
  if (selectedOption) {
    item.jb_bynd = selectedOption.finalResult;
  }
}


const handlePxyChange = (selectKey) => {
  // 获取对应的样品编号
  const selectedSampleNumber = waterForm.bdatas.pxycd_fx[selectKey];

  // 在 pxyList 中查找匹配的样品
  const selectedSample = listB.pxyList.find(
      sample => sample.sampleNumber === selectedSampleNumber
  );

  // 填充浓度信息到相应的字段
  if (selectKey === 'bt_1') {
    waterForm.bdatas.pxycd_fx.cdnd_1 = selectedSample.finalResult;
  } else if (selectKey === 'bt_2') {
    waterForm.bdatas.pxycd_fx.cdnd_2 = selectedSample.finalResult;
  } else if (selectKey === 'bt_3') {
    waterForm.bdatas.pxycd_fx.cdnd_3 = selectedSample.finalResult;
  } else if (selectKey === 'bt_4') {
    waterForm.bdatas.pxycd_fx.cdnd_4 = selectedSample.finalResult;
  } else if (selectKey === 'bt_5') {
    waterForm.bdatas.pxycd_fx.cdnd_5 = selectedSample.finalResult;
  } else if (selectKey === 'bt_6') {
    waterForm.bdatas.pxycd_fx.cdnd_6 = selectedSample.finalResult;
  }
}

// 求平均值
const calculateAverage = (inputName) => {
  let average = 0;
  let relativeDeviation = 0;
  let values = [];
  let cdnd_1, cdnd_2, referenceValue = 0;

  // 根据输入框的名称获取对应的值
  switch (inputName) {
    case 'cdnd_1':
    case 'cdnd_2':
      values = [
        waterForm.bdatas.pxycd_fx.cdnd_1,
        waterForm.bdatas.pxycd_fx.cdnd_2
      ];
      cdnd_1 = waterForm.bdatas.pxycd_fx.cdnd_1;
      cdnd_2 = waterForm.bdatas.pxycd_fx.cdnd_2;
      referenceValue = cdnd_1 + cdnd_2; // 真实值是 cdnd_1 + cdnd_2
      break;
    case 'cdnd_3':
    case 'cdnd_4':
      values = [
        waterForm.bdatas.pxycd_fx.cdnd_3,
        waterForm.bdatas.pxycd_fx.cdnd_4
      ];
      cdnd_1 = waterForm.bdatas.pxycd_fx.cdnd_3;
      cdnd_2 = waterForm.bdatas.pxycd_fx.cdnd_4;
      referenceValue = cdnd_1 + cdnd_2;
      break;
    case 'cdnd_5':
    case 'cdnd_6':
      values = [
        waterForm.bdatas.pxycd_fx.cdnd_5,
        waterForm.bdatas.pxycd_fx.cdnd_6
      ];
      cdnd_1 = waterForm.bdatas.pxycd_fx.cdnd_5;
      cdnd_2 = waterForm.bdatas.pxycd_fx.cdnd_6;
      referenceValue = cdnd_1 + cdnd_2;
      break;
  }

  // 计算平均值
  const validValues = values.filter(value => !isNaN(value) && value !== null && value !== '');
  if (validValues.length > 0) {
    const total = validValues.reduce((sum, value) => sum + parseFloat(value), 0);
    average = total / validValues.length;
  }
  // 更新相对偏差
  if (referenceValue !== 0 && !isNaN(cdnd_1) && !isNaN(cdnd_2)) {
    relativeDeviation = (Math.abs(cdnd_1 - cdnd_2) / referenceValue) * 100;
  }
  // 更新平均值和相对偏差到对应字段
  if (inputName === 'cdnd_1' || inputName === 'cdnd_2') {
    waterForm.bdatas.pxycd_fx.pjzOne = average;
    waterForm.bdatas.pxycd_fx.xdpcOne = relativeDeviation;
  } else if (inputName === 'cdnd_3' || inputName === 'cdnd_4') {
    waterForm.bdatas.pxycd_fx.pjzTow = average;
    waterForm.bdatas.pxycd_fx.xdpcTow = relativeDeviation;
  } else if (inputName === 'cdnd_5' || inputName === 'cdnd_6') {
    waterForm.bdatas.pxycd_fx.pjzThree = average;
    waterForm.bdatas.pxycd_fx.xdpcThree = relativeDeviation;
  }
}

</script>

<template>
  <el-card class="box-card">
    <h1 style="text-align: center">环境空气和废气 总烃/甲烷/非甲烷总烃分析原始记录（B面）</h1>
    <div>SXLPHJ/JL/CX-22-68</div>
    <table class="table">
      <tr>
        <td colspan="2" style="text-align: center;border-right: none;"></td>
        <td colspan="8" style="text-align: center; border-left: none; border-right: none; font-weight: bold;">标准曲线绘制
        </td>
        <td colspan="2" style="text-align: center;border-left: none;">
          <div style="display: flex;align-items: center">
            <span style="width: 100px;">绘制日期：</span>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入" v-model="waterForm.hzrq"/>
          </div>

        </td>
      </tr>
      <tr style="background-color: #f2f2f2">
        <td colspan="1">甲烷标准气体编号</td>
        <td colspan="2">
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.bdatas.jwbzqtbh"/>
        </td>
        <td colspan="2">浓度</td>
        <td colspan="1">
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.bdatas.jwbzqtnd"/>
        </td>
        <td colspan="1">有效期</td>
        <td colspan="4">
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.bdatas.jwbzqyxq"/>
        </td>
      </tr>
      <tr>
        <td colspan="1">总烃标准气体编号</td>
        <td colspan="2">
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.bdatas.ztbzqtbh"/>
        </td>
        <td colspan="2">浓度</td>
        <td colspan="1">
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.bdatas.ztbzqtnd"/>
        </td>
        <td colspan="1">有效期</td>
        <td colspan="4">
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.bdatas.ztbzqtyxq"/>
        </td>
      </tr>
      <tr style="background-color: #f2f2f2">
        <td colspan="1">稀释气气体编号</td>
        <td colspan="2">
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.bdatas.xsqtbh"/>
        </td>
        <td colspan="2">浓度</td>
        <td colspan="1">
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.bdatas.xsqtnd"/>
        </td>
        <td colspan="1">有效期</td>
        <td colspan="4">
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.bdatas.xsqtyxq"/>
        </td>
      </tr>
      <tr>
        <td colspan="1">配气仪器</td>
        <td colspan="2">
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.bdatas.device_name"/>
        </td>
        <td colspan="2">仪器型号</td>
        <td colspan="1">
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.bdatas.device_model"/>
        </td>
        <td colspan="1">仪器编号</td>
        <td colspan="4">
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.bdatas.device_number"/>
        </td>
      </tr>
      <tr>
        <td colspan="1" rowspan="4">甲烷</td>
        <td colspan="1">
          <div>
            甲烷浓度（
            <el-input style="width: 20%;" placeholder="请输入" v-model="waterForm.unit.jw"></el-input>
            ）
          </div>
        </td>
        <td colspan="1">
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.bdatas.jwnd.jwndOne"/>
        </td>
        <td colspan="1">
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.bdatas.jwnd.jwndTow"/>
        </td>
        <td colspan="1">
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.bdatas.jwnd.jwndThree"/>
        </td>
        <td colspan="1">
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.bdatas.jwnd.jwndFour"/>
        </td>
        <td colspan="2">
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.bdatas.jwnd.jwndFive"/>
        </td>
        <td colspan="3">
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.bdatas.jwnd.jwndSix"/>
        </td>
      </tr>
      <tr>
        <td colspan="1">出峰时间（min）</td>
        <td colspan="1">
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.bdatas.jwcfsj.jwcfsjOne"/>
        </td>
        <td colspan="1">
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.bdatas.jwcfsj.jwcfsjTow"/>
        </td>
        <td colspan="1">
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.bdatas.jwcfsj.jwcfsjThree"/>
        </td>
        <td colspan="1">
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.bdatas.jwcfsj.jwcfsjFour"/>
        </td>
        <td colspan="2">
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.bdatas.jwcfsj.jwcfsjFive"/>
        </td>
        <td colspan="3">
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.bdatas.jwcfsj.jwcfsjSix"/>
        </td>
      </tr>
      <tr>
        <td colspan="1">出峰面积（μv.s）</td>
        <td colspan="1">
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.bdatas.jwcfmj.jwcfmjOne"/>
        </td>
        <td colspan="1">
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.bdatas.jwcfmj.jwcfmjTow"/>
        </td>
        <td colspan="1">
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.bdatas.jwcfmj.jwcfmjThree"/>
        </td>
        <td colspan="1">
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.bdatas.jwcfmj.jwcfmjFour"/>
        </td>
        <td colspan="2">
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.bdatas.jwcfmj.jwcfmjFive"/>
        </td>
        <td colspan="3">
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.bdatas.jwcfmj.jwcfmjSix"/>
        </td>
      </tr>
      <tr>
        <td colspan="1">校准曲线(y=a₁+b₁x)</td>
        <td colspan="9">
          <div>
            <div class="flex ac">
              <div class="flex ac">
                y=
                <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                          v-model="waterForm.bdatas.jwy"/>
              </div>
              <div class="flex ac">
                r₁=
                <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                          v-model="waterForm.bdatas.jwr1"/>
              </div>
            </div>
            <div class="flex ac">
              a₁=
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                        v-model="waterForm.bdatas.jwa1"/>
            </div>
            <div class="flex ac">
              b₁=
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                        v-model="waterForm.bdatas.jwb1"/>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td colspan="1" rowspan="4">总烃</td>
        <td colspan="1">
          <div>
            总烃浓度（
            <el-input style="width: 20%;" placeholder="请输入" v-model="waterForm.unit.zt"></el-input>
            ）
          </div>
        </td>
        <td colspan="1">
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.bdatas.ztnd.ztndOne"/>
        </td>
        <td colspan="1">
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.bdatas.ztnd.ztndTow"/>
        </td>
        <td colspan="1">
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.bdatas.ztnd.ztndThree"/>
        </td>
        <td colspan="1">
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.bdatas.ztnd.ztndFour"/>
        </td>
        <td colspan="2">
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.bdatas.ztnd.ztndFive"/>
        </td>
        <td colspan="3">
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.bdatas.ztnd.ztndSix"/>
        </td>
      </tr>
      <tr>
        <td colspan="1">出峰时间（min）</td>
        <td colspan="1">
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.bdatas.ztcfsj.ztcfsjOne"/>
        </td>
        <td colspan="1">
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.bdatas.ztcfsj.ztcfsjTow"/>
        </td>
        <td colspan="1">
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.bdatas.ztcfsj.ztcfsjThree"/>
        </td>
        <td colspan="1">
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.bdatas.ztcfsj.ztcfsjFour"/>
        </td>
        <td colspan="2">
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.bdatas.ztcfsj.ztcfsjFive"/>
        </td>
        <td colspan="3">
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.bdatas.ztcfsj.ztcfsjSix"/>
        </td>
      </tr>
      <tr>
        <td colspan="1">出峰面积（μv.s）</td>
        <td colspan="1">
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.bdatas.ztcfmj.ztcfmjOne"/>
        </td>
        <td colspan="1">
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.bdatas.ztcfmj.ztcfmjTow"/>
        </td>
        <td colspan="1">
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.bdatas.ztcfmj.ztcfmjThree"/>
        </td>
        <td colspan="1">
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.bdatas.ztcfmj.ztcfmjFour"/>
        </td>
        <td colspan="2">
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.bdatas.ztcfmj.ztcfmjFive"/>
        </td>
        <td colspan="3">
          <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                    v-model="waterForm.bdatas.ztcfmj.ztcfmjSix"/>
        </td>
      </tr>
      <tr>
        <td colspan="1">校准曲线(y=a₂+b₂x)</td>
        <td colspan="9">
          <div>
            <div class="flex ac">
              <div class="flex ac">
                y=
                <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                          v-model="waterForm.bdatas.zty"/>
              </div>
              <div class="flex ac">
                r₁=
                <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                          v-model="waterForm.bdatas.ztr2"/>
              </div>
            </div>
            <div class="flex ac">
              a₁=
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                        v-model="waterForm.bdatas.zta2"/>
            </div>
            <div class="flex ac">
              b₁=
              <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                        v-model="waterForm.bdatas.ztb2"/>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td colspan="12" style="text-align: center;font-weight: bold;">曲线校核点测定</td>
      </tr>
      <tr style="text-align: center;background-color: #f2f2f2">
        <td colspan="2">样品编号</td>
        <td colspan=" 2">测定结果(mg/m³)</td>
        <td colspan="2">相对误差（%）</td>
        <td colspan="3">质控要求</td>
        <td colspan="3">是否合格</td>
      </tr>
      <tr v-for="(item,index) in waterForm.bdatas.qxjhdcd" :key="index">
        <td colspan="2">
          <el-select v-model="item.qx_ypbh" placeholder="请选择" style="width: 100%; border: 1px solid transparent"
                     filterable
                     allow-create
                     default-first-option
                     @change="handleQxChange(item)">
            <el-option
                v-for="(option, index) in listB.qxyList"
                :key="index"
                :label="option.sampleNumber"
                :value="option.sampleNumber">
            </el-option>
          </el-select>
        </td>
        <td colspan="2">
          <el-input
              style="width: 100%;border: 1px solid transparent" placeholder="请输入"
              v-model="item.qx_cdjg"/>
        </td>
        <td colspan="2">
          <el-input
              style="width: 100%;border: 1px solid transparent" placeholder="请输入"
              v-model="item.qx_xd"/>
        </td>
        <td colspan="3">
          <el-input
              style="width: 100%;border: 1px solid transparent" placeholder="请输入"
              v-model="item.qx_zkyq"/>
        </td>
        <td colspan="3">
          <el-input
              style="width: 100%;border: 1px solid transparent" placeholder="请输入"
              v-model="item.qx_sfhg"/>
        </td>
      </tr>
      <tr>
        <td colspan="11" style="text-align: center;font-weight: bold;">空白质控样测定</td>
      </tr>
      <tr style="text-align: center;background-color: #f2f2f2">
        <td colspan="1">样品编号</td>
        <td colspan=" 1">空白值(mg/m³)</td>
        <td colspan="1">质控指标(mg/m³)</td>
        <td colspan="1">是否合格</td>
        <td colspan="1">样品编号</td>
        <td colspan=" 1">空白值(mg/m³)</td>
        <td colspan="2">质控指标(mg/m³)</td>
        <td colspan="3">是否合格</td>
      </tr>
      <tr style="height: 40px;" v-for="(item,index) in waterForm.kbycd" :key="index">
        <td colspan="1">
          <el-select v-model="item.kb_ypbh" placeholder="请选择" style="width: 100%; border: 1px solid transparent"
                     filterable
                     allow-create
                     default-first-option
                     @change="handleKbyChange(item)">
            <el-option
                v-for="(option, index) in listB.kbyList"
                :key="index"
                :label="option.sampleNumber"
                :value="option.sampleNumber">
            </el-option>
          </el-select>
        </td>
        <td colspan="1">
          <el-input
              style="width: 100%;border: 1px solid transparent" placeholder="请输入"
              v-model="item.kb_kbz"/>
        </td>
        <td colspan="1">
          <el-input
              style="width: 100%;border: 1px solid transparent" placeholder="请输入"
              v-model="item.kb_zkzb"/>
        </td>
        <td colspan="1">
          <el-input
              style="width: 100%;border: 1px solid transparent" placeholder="请输入"
              v-model="item.kb_sfhg"/>
        </td>
        <td colspan="1">
          <el-select v-model="item.kb_ypbh1" placeholder="请选择" style="width: 100%; border: 1px solid transparent"
                     filterable
                     allow-create
                     default-first-option
                     @change="handleKbyChange(item)">
            <el-option
                v-for="(option, index) in listB.kbyList"
                :key="index"
                :label="option.sampleNumber"
                :value="option.sampleNumber">
            </el-option>
          </el-select>
        </td>
        <td colspan="1">
          <el-input
              style="width: 100%;border: 1px solid transparent" placeholder="请输入"
              v-model="item.kb_kbz1"/>
        </td>
        <td colspan="2">
          <el-input
              style="width: 100%;border: 1px solid transparent" placeholder="请输入"
              v-model="item.kb_zkzb1"/>
        </td>
        <td colspan="3">
          <el-input
              style="width: 100%;border: 1px solid transparent" placeholder="请输入"
              v-model="item.kb_sfhg1"/>
        </td>
      </tr>

      <tr>
        <td colspan="11" style="text-align: center;font-weight: bold;">平行样测定</td>
      </tr>
      <tr style="text-align: center;background-color: #f2f2f2">
        <td colspan="2">平行样编号</td>
        <td colspan=" 2">
          <div class="flex ac">
            <div style="display: flex;align-items: center;width: 50%;">
              (
              <el-select v-model="waterForm.bdatas.pxycd_fx.bt_1" placeholder="请选择"
                         filterable
                         allow-create
                         default-first-option
                         style="width: 100%; border: 1px solid transparent"
                         @change="handlePxyChange('bt_1')">
                <el-option
                    v-for="(option, index) in listB.pxyList"
                    :key="index"
                    :label="option.sampleNumber"
                    :value="option.sampleNumber">
                </el-option>
              </el-select>
              )
            </div>
            与
            <div style="display: flex;align-items: center;width: 50%;">
              (
              <el-select v-model="waterForm.bdatas.pxycd_fx.bt_2" placeholder="请选择"
                         filterable
                         allow-create
                         default-first-option
                         style="width: 100%; border: 1px solid transparent"
                         @change="handlePxyChange('bt_2')">
                <el-option
                    v-for="(option, index) in listB.pxyList"
                    :key="index"
                    :label="option.sampleNumber"
                    :value="option.sampleNumber">
                </el-option>
              </el-select>
              )
            </div>
          </div>
        </td>
        <td colspan="2">
          <div class="flex ac">
            <div style="display: flex;align-items: center;width: 50%;">
              (
              <el-select v-model="waterForm.bdatas.pxycd_fx.bt_3" placeholder="请选择"
                         filterable
                         allow-create
                         default-first-option
                         style="width: 100%; border: 1px solid transparent"
                         @change="handlePxyChange('bt_3')">
                <el-option
                    v-for="(option, index) in listB.pxyList"
                    :key="index"
                    :label="option.sampleNumber"
                    :value="option.sampleNumber">
                </el-option>
              </el-select>
              )
            </div>
            与
            <div style="display: flex;align-items: center;width: 50%;">
              (
              <el-select v-model="waterForm.bdatas.pxycd_fx.bt_4" placeholder="请选择"
                         filterable
                         allow-create
                         default-first-option
                         style="width: 100%; border: 1px solid transparent"
                         @change="handlePxyChange('bt_4')">
                <el-option
                    v-for="(option, index) in listB.pxyList"
                    :key="index"
                    :label="option.sampleNumber"
                    :value="option.sampleNumber">
                </el-option>
              </el-select>
              )
            </div>
          </div>
        </td>
        <td colspan="5">
          <div class="flex ac">
            <div style="display: flex;align-items: center;width: 50%;">
              (
              <el-select v-model="waterForm.bdatas.pxycd_fx.bt_5" placeholder="请选择"
                         filterable
                         allow-create
                         default-first-option
                         style="width: 100%; border: 1px solid transparent"
                         @change="handlePxyChange('bt_5')">
                <el-option
                    v-for="(option, index) in listB.pxyList"
                    :key="index"
                    :label="option.sampleNumber"
                    :value="option.sampleNumber">
                </el-option>
              </el-select>
              )
            </div>
            与
            <div style="display: flex;align-items: center;width: 50%;">
              (
              <el-select v-model="waterForm.bdatas.pxycd_fx.bt_6" placeholder="请选择"
                         filterable
                         allow-create
                         default-first-option
                         style="width: 100%; border: 1px solid transparent"
                         @change="handlePxyChange('bt_6')">
                <el-option
                    v-for="(option, index) in listB.pxyList"
                    :key="index"
                    :label="option.sampleNumber"
                    :value="option.sampleNumber">
                </el-option>
              </el-select>
              )
            </div>
          </div>
        </td>
      </tr>
      <tr style="text-align: center;">
        <td colspan="2">测定浓度(mg/m3)</td>
        <td colspan="1">
          <el-input
              style="width: 100%;border: 1px solid transparent"
              placeholder="请输入"
              v-model="waterForm.bdatas.pxycd_fx.cdnd_1"
              @blur="calculateAverage('cdnd_1')"
          />
        </td>
        <td colspan="1">
          <el-input
              style="width: 100%;border: 1px solid transparent"
              placeholder="请输入"
              v-model="waterForm.bdatas.pxycd_fx.cdnd_2"
              @blur="calculateAverage('cdnd_2')"
          />
        </td>
        <td colspan="1">
          <el-input
              style="width: 100%;border: 1px solid transparent"
              placeholder="请输入"
              v-model="waterForm.bdatas.pxycd_fx.cdnd_3"
              @blur="calculateAverage('cdnd_3')"
          />
        </td>
        <td colspan="1">
          <el-input
              style="width: 100%;border: 1px solid transparent"
              placeholder="请输入"
              v-model="waterForm.bdatas.pxycd_fx.cdnd_4"
              @blur="calculateAverage('cdnd_4')"
          />
        </td>
        <td colspan="2">
          <el-input
              style="width: 100%;border: 1px solid transparent"
              placeholder="请输入"
              v-model="waterForm.bdatas.pxycd_fx.cdnd_5"
              @blur="calculateAverage('cdnd_5')"
          />
        </td>
        <td colspan="3">
          <el-input
              style="width: 100%;border: 1px solid transparent"
              placeholder="请输入"
              v-model="waterForm.bdatas.pxycd_fx.cdnd_6"
              @blur="calculateAverage('cdnd_6')"
          />
        </td>
      </tr>
      <tr style="text-align: center;">
        <td colspan="2">平均值(mg/m3)</td>
        <td colspan="2">
          <el-input
              style="width: 100%;border: 1px solid transparent"
              placeholder="请输入"
              v-model="waterForm.bdatas.pxycd_fx.pjzOne"
          />
        </td>
        <td colspan="2">
          <el-input
              style="width: 100%;border: 1px solid transparent"
              placeholder="请输入"
              v-model="waterForm.bdatas.pxycd_fx.pjzTow"
          />
        </td>
        <td colspan="5">
          <el-input
              style="width: 100%;border: 1px solid transparent"
              placeholder="请输入"
              v-model="waterForm.bdatas.pxycd_fx.pjzThree"
          />
        </td>
      </tr>
      <tr style="text-align: center;">
        <td colspan="2">相对偏差</td>
        <td colspan="2">
          <el-input
              style="width: 100%;border: 1px solid transparent"
              placeholder="请输入"
              v-model="waterForm.bdatas.pxycd_fx.xdpcOne"
          />
        </td>
        <td colspan="2">
          <el-input
              style="width: 100%;border: 1px solid transparent"
              placeholder="请输入"
              v-model="waterForm.bdatas.pxycd_fx.xdpcTow"
          />
        </td>
        <td colspan="5">
          <el-input
              style="width: 100%;border: 1px solid transparent"
              placeholder="请输入"
              v-model="waterForm.bdatas.pxycd_fx.xdpcThree"
          />
        </td>
      </tr>
      <tr style="text-align: center;">
        <td colspan="2">允许相对偏差</td>
        <td colspan="2">
          <el-input
              style="width: 100%;border: 1px solid transparent"
              placeholder="请输入"
              v-model="waterForm.bdatas.pxycd_fx.yxxdpcOne"
          />
        </td>
        <td colspan="2">
          <el-input
              style="width: 100%;border: 1px solid transparent"
              placeholder="请输入"
              v-model="waterForm.bdatas.pxycd_fx.yxxdpcTow"
          />
        </td>
        <td colspan="5">
          <el-input
              style="width: 100%;border: 1px solid transparent"
              placeholder="请输入"
              v-model="waterForm.bdatas.pxycd_fx.yxxdpcThree"
          />
        </td>
      </tr>
      <tr style="text-align: center;">
        <td colspan="2">是否合格</td>
        <td colspan="2">
          <el-input
              style="width: 100%;border: 1px solid transparent"
              placeholder="请输入"
              v-model="waterForm.bdatas.pxycd_fx.sfhgOne"
          />
        </td>
        <td colspan="2">
          <el-input
              style="width: 100%;border: 1px solid transparent"
              placeholder="请输入"
              v-model="waterForm.bdatas.pxycd_fx.sfhgTow"
          />
        </td>
        <td colspan="5">
          <el-input
              style="width: 100%;border: 1px solid transparent"
              placeholder="请输入"
              v-model="waterForm.bdatas.pxycd_fx.sfhgThree"
          />
        </td>
      </tr>
      <tr>
        <td colspan="2">备注</td>
        <td colspan="9">
          <el-input
              style="width: 100%;border: 1px solid transparent"
              placeholder="请输入"
              v-model="waterForm.bnotes"
          />
        </td>
      </tr>
    </table>
  </el-card>
</template>

<style scoped lang="scss">
.card {
  padding: 20px 25px;
}

.flex {
  display: flex;
}

.jb {
  justify-content: space-between;
}

.ac {
  align-items: center;
}

.table {
  width: 100%;
  border-collapse: collapse;
  /* 表格边框合并 */
  text-align: left;
  /* 默认左对齐 */
  font-size: 14px;
  /* 字体大小 */
  color: #606266;
  /* 默认字体颜色 */
  margin-bottom: 20px;
}

.table th,
.table td {
  border: 1px solid #c2bfbf;
  /* 表格单元格边框颜色 */
  padding: 12px;
  /* 单元格内边距 */
}

.table th {
  background: #f5f7fa;
  /* 表头背景色 */
  font-weight: 600;
  /* 表头字体加粗 */
  color: #303133;
  /* 表头字体颜色 */
  text-align: center;
  /* 表头居中 */
}

.table-td {
  display: flex;
}

::v-deep .el-input__wrapper {
  background-color: transparent;
  box-shadow: none;
}

::v-deep .el-select__wrapper {
  background-color: transparent;
  box-shadow: none;
}

::v-deep .el-input-group__append {
  background-color: transparent;
  box-shadow: none;
}
</style>
